<template>
  <div class="app-container">
    <ul class="tabTitle">
      <li
        v-for="(item, index) in titleliat"
        :key="index"
        v-on:click="changePage(index)"
        :class="{ active: activeIndex == index }"
      >
        {{ item.titles }}
      </li>
      <el-button
        v-show="inputStatus == 0"
        type="primary"
        class="dialog-footer"
        @click="goback"
        >返回</el-button
      >
    </ul>
    <div class="tabCont">
      <div v-show="activeIndex == 0" class="essentialinfors">
        <stepOne :allList="allList" ref="stepOne"></stepOne>
      </div>
      <!-- 字段信息查看 -->
      <div v-if="activeIndex == 1 && inputStatus == 0" class="essentialinfor">
        <stepTwo :allList="allList" ref="stepTwo"></stepTwo>
      </div>
      <!-- 字段信息修改 -->
      <div v-if="activeIndex == 1 && inputStatus == 1" class="essentialinfors">
        <stepTwo :allList="allList" ref="stepTwo"></stepTwo>
      </div>
      <!-- 储存位置查看 -->
      <div v-if="inputStatus == 0 && activeIndex == 2" class="essentialinfor">
        <stepThree :allList="allList" ref="stepThree"></stepThree>
      </div>
      <!-- 储存位置修改 -->
      <div v-if="inputStatus == 1 && activeIndex == 2" class="essentialinfors">
        <stepThree :allList="allList" ref="stepThree"></stepThree>
      </div>
    </div>
  </div>
</template>

<script>
import stepOne from "../createdList/componnets/stepOne.vue";
import stepTwo from "../createdList/componnets/stepTwo.vue";
import stepThree from "../createdList/componnets/stepThree.vue";
import { pageQuery } from "@/api/metadata/metadata";
export default {
  components: {
    stepOne,
    stepTwo,
    stepThree,
  },
  data() {
    return {
      titleliat: [
        { id: 0, titles: "基本信息" },
        { id: 1, titles: "字段信息" },
        { id: 2, titles: "存储位置" },
      ],
      // statusOut:['子表','单例','内部','第三方'],
      status: "0",
      activeIndex: 0,
      // 是否显示弹出层
      open: false,
      //配置表头
      openView: false,
      //表头的参数
      Headerform: {},
      // 表单参数
      form: {},
      //选项
      checkedout: "0",
      //基本数据
      postList: [],
      //所有的数据
      allList: {},
      //字段数据
      queryList: [],
      form: {},
      options: [],
      tableComment: "",
      inputStatus: "", //0-查看详情  1--编辑 2---新建元数据进去
    };
  },
  created() {
    let info = localStorage.getItem("info");
    this.postList = JSON.parse(info);
    this.inputStatus = localStorage.getItem("status");
    this.allList = {
      info: this.postList,
      status: this.inputStatus,
    };
  },
  mounted() {},
  methods: {
    changePage(index) {
      this.activeIndex = index;
    },
    //返回
    goback() {
      this.$router.push("/metadata/metadataList");
    },
    // //保存
    // preservation() {
    //   editMetadataInfo(this.postList)
    //     .then((response) => {
    //       console.log(response, "55555555555");
    //       if (response.success) {
    //         this.$modal.msgSuccess("修改成功");
    //           this.$router.go(-1)
    //       }
    //     })
    //     .catch((err) => {
    //       this.$message.error(err.message);
    //     });
    // },
    //在表头添加icon
    renderHeader(h, { column }) {
      // h即为cerateElement的简写，具体可看vue官方文档
      return h("div", [
        h("span", column.label),
        h("i", {
          class: "el-icon-setting",
          style: "color:#000000;margin-left:5px;fontSize: 18px;",
        }),
      ]);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.app-container {
  .tabTitle {
    width: 97%;
    height: 80px;
    list-style: none;
    font-size: 16px;
    padding: 20px 10px;
    margin-left: 32px;
    border-bottom: 1px solid rgb(221, 218, 218);
    li {
      float: left;
      padding: 0px;
      margin-right: 30px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      // border-radius: 5px;
      // background: #e2e3e4;
      color: #7f7f7f;
    }
    .active {
      background: #fff;
      color: $labelColor;
      border-bottom: 2px solid $labelColor;
    }
  }
  .dialog-footer {
     float: right;
     width: 122px;
     height: 40px;
     background-color: $labelColor;
     border-radius: 4px;
     color: #fff;
     margin-left: 20px;
     font-size: 16px;
  }
  .tabCont {
    background: #fff;
    height: 610px;
    // .essentialinfor {
    //   margin: 30px 70px;
    // }
    //  .essentialinfors {
    //    margin: 30px 70px;
    // }
    .dialog-add {
      text-align: left;
      padding-top: 10px;
    }
  }
}
</style>
